let draggedItem = null;
let placeholder = document.createElement('li'); //创建li
placeholder.classList.add('placeholder'); //给这个元素添加类名

document.addEventListener('dragstart', function(event) { //监听页面的所有元素，当元素被拖拽时触发
	draggedItem = event.target;
	event.target.classList.add('dragged');
});

document.addEventListener('dragend', function(event) { //当拖拽结束时触发
	event.target.classList.remove('dragged'); //清除类名为dragged
	placeholder.remove(); //删除这个元素
});

document.addEventListener('dragover', function(event) { //dragover事件表示当被拖拽的元素拖拽到一个目标上方时触发的函数
	event.preventDefault(); //阻止浏览器默认的拖拽行为

	if (event.target.tagName === 'LI') { //判定当前的拖拽对象是否是我们需要的li
		const rect = event.target.getBoundingClientRect(); //获取当前元素的位置信息
		const midY = rect.top + (rect.bottom - rect.top) / 2; //拿到当前元素的中心点
		const isAfter = event.clientY > midY; //event.clientY代表鼠标Y轴的点，判断鼠标的点是否大过当前元素的Y轴，大过说明是向下添加，小于说明是往上排序或者不动

		if (isAfter) { //就是蓝色的盒子，这个盒子是临时的，拖拽结束之后就会被删除
			event.target.parentNode.insertBefore(placeholder, event.target.nextSibling); //获取当前元素的父节点并向上添加元素
		} else {
			event.target.parentNode.insertBefore(placeholder, event.target);
		}
	}
});

document.addEventListener('drop', function(event) { //当拖拽被释放时触发
	if (event.target.tagName === 'LI') { //这里真正的创建了一个li
		event.preventDefault();
		const targetItem = event.target;
		const parent = targetItem.parentNode;
		const rect = targetItem.getBoundingClientRect();
		const midY = rect.top + (rect.bottom - rect.top) / 2;
		const isAfter = event.clientY > midY;

		if (isAfter) {
			parent.insertBefore(draggedItem, targetItem.nextSibling);
		} else {
			parent.insertBefore(draggedItem, targetItem);
		}
	}
});
